<template>
  <div class="like">
    <div class="title"><h2>猜你喜欢</h2></div>
    <div>
      <ul>
        <li
          v-for="(item, index) in goodsList"
          :key="index"
          @click="goDetail(item.goodsID)"
        >
          <h3><img :src="item.goodsImg" alt="" /></h3>
          <span class="titles">{{ item.content }}</span>
          <div class="price">￥{{ item.price }}</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyLike",
  data() {
    return {
      // likeList: [
      //   {
      //     id: 1,
      //     imgurl: "./images/like.jpeg",
      //     title: "建盏茶具套装 红色芝麻好好滴盛世芳华的好时机和第三方",
      //     price: "129",
      //   },
      //   {
      //     id: 2,
      //     imgurl: "./images/like.jpeg",
      //     price: "129",
      //     title: "建盏茶具套装 红色芝麻好好滴盛世芳华的好时机和第三方",
      //   },
      //   {
      //     id: 3,
      //     imgurl: "./images/like.jpeg",
      //     price: "129",
      //     title: "建盏茶具套装 红色芝麻好好滴盛世芳华的好时机和第三方",
      //   },
      //   {
      //     id: 4,
      //     imgurl: "./images/like.jpeg",
      //     price: "129",
      //     title: "建盏茶具套装 红色芝麻好好滴盛世芳华的好时机和第三方",
      //   },
      //   {
      //     id: 5,
      //     imgurl: "./images/like.jpeg",
      //     price: "129",
      //     title: "建盏茶具套装 红色芝麻好好滴盛世芳华的好时机和第三方",
      //   },
      // ],
      goodsList: [],
    };
  },
  created() {
    this.getGoodsList();
  },
  methods: {
    goDetail(id) {
      this.$router.push("/detail/" + id);
    },
    getGoodsList() {
      this.$http.get("/like").then((res) => {
        console.log(res);
        this.goodsList = res.data;
        // console.log(this.goodsList[0].goodsID);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.like {
  margin-bottom: 70px;
}
h2 {
  font-size: 19px;
  margin: 0px;
  text-align: center;
}
h3 {
  margin: 10px 0px 5px 0;
  padding: 0;
  img {
    width: 174px;
    height: 174px;
  }
}
ul {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
ul li {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50%;
}
.titles {
  font-size: 14px;
  color: #444;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 94%;
}
.price {
  color: red;
  font-size: 16px;
  font-weight: 700;
  float: left;
}
</style>